<template>
  <div class="pdf-box" id="pdf-box">
    <div id="content-box" class="content-box">
      <h1 data-op-type="text">{{ title }}</h1>
      <p data-op-type="text">{{ p1 }}</p>
      <div data-op-type="block" class="block" style="width: 592px; height: 400px;"></div>
      <SimpleTable :column="column" :data="data"></SimpleTable>
    </div>
  </div>
  <div class="opt-bar">
    <button @click="handleBuild">构建PDF</button>
  </div>
</template>
<script lang='ts' setup name='PDFContainer'>
import { ref } from 'vue'
import SimpleTable from '@/components/simple-table/simple-table.vue'
import mockData from '@/utils/mock'
import { render } from '@/utils/render'
const title = ref(mockData.title)
const p1 = ref(mockData.p1)
// ========表格相关====================
const column = ref([
  { label: '姓名', prop: 'name' },
  { label: '性别', prop: 'sex' },
  { label: '简介', prop: 'profile' }
])
const data = ref(mockData.data)

const handleBuild = () => {
  render()
}

</script>
<style lang='scss'>
* {
  padding: 0;
  margin: 0;
}

html {
  background-color: #cfcfcf;
}


.pdf-box {
  width: 792px;
  margin: 0 auto;
}

.pdf-page-wrapper {
  background-color: #cfcfcf;


}



.pdf-container {
  width: 792px;
  margin: 0 auto;

  .pdf-page-item {
    background-color: white;
    margin-bottom: 12px;

    .pdf-page-box {
      min-height: 100%;
    }
  }
}

.block {
  background-color: #efefef;
  margin-bottom: 16px;
}

.opt-bar {
  position: fixed;
  top: 20%;
  right: 20px;
}
</style>